<template>
  <div class="directory">
    <div class="head">
      <div class="title"><div class="file_height_light_icon" /><div>{{ title }}</div></div>
      <div class="add_file_icon" @click="addGroup_visible = true" />
    </div>
    <div v-loading="loading" class="file_list">
      <div class="search">
        <el-input v-model="searchKey" prefix-icon="el-icon-search" placeholder="请输入关键词进行搜索" @keyup.enter.native="onSearch" />
      </div>
      <el-tree
        ref="tree"
        class="filter-tree"
        node-key="id"
        :data="groupDataList"
        :props="defaultProps"
        default-expand-all
        highlight-current
        :filter-node-method="filterNode"
        :current-node-key="currentNodeKey"
        @node-click="nodeClick"
      >
        <span slot-scope="{ node, data }" class="file_node">
          <span class="flex">
            <div class="file_icon" />
            <span>{{ node.label }}</span>
          </span>
          <span class="count">3</span>
        </span>
      </el-tree>
    </div>
    <addGroup :visible="addGroup_visible" @close="closeAddGroup" />
  </div>
</template>
<script>
import { media_group_list } from '@/api/directory'

import addGroup from './addGroup-dialog.vue'

export default {
  name: 'Directory',
  components: { addGroup },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      addGroup_visible: false,
      searchKey: '',
      groupDataList: [{
        id: 0,
        name: '全部文件',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentNodeKey: null
    }
  },
  computed: {

  },
  // 监控data中的数据变化
  watch: {
    searchKey(val) {
      this.$refs.tree.filter(val)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loadData()
  },
  // 生命周期 - keep-alive
  async activated() { },
  // 方法集合
  methods: {
    async loadData() {
      try {
        this.loading = true
        const { code, data } = await media_group_list()
        if (!code) {
          this.groupDataList[0].children = data
          this.$nextTick(() => {
            this.currentNodeKey = data[0].id
            this.$refs.tree.setCurrentKey(data[0].id)
          })
          console.log(data[0].id)
          this.loading = false
        }
      } catch (error) {
        this.loading = false
      }
    },
    nodeClick(data, obj, node) {
      this.currentNodeKey = data.id
      if (data.id) {
        this.$emit('groupChange', data)
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    onSearch() {

    },
    closeAddGroup() {
      this.addGroup_visible = false
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next(vm => {

    })
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.directory{
	width: 320px;
	min-height: calc(100vh - 70px);
	background-color: #FFFFFF;
	.head{
		width: 320px;
		height: 50px;
		background: #F7F7F7;
		font-size: 16px;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #000000;
		line-height: 50px;
		padding: 0 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title{
			display: flex;
			align-items: center;
		}
	}
	.file_list{
		.search{
			padding: 12px 30px 8px 30px;
		}
	}
}

.file_node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
	padding-right: 30px;
	width: 100%;
}

.count{
	font-weight: 400;
	color: #606266;
}

.file_height_light_icon{
	width: 16px;
	height: 16px;
	background: url('../../assets/report/file_height_light_icon.png');
	background-size: 100%;
	margin-right: 10px;
}
.add_file_icon{
	width: 16px;
	height: 16px;
	background: url('../../assets/report/add_file.png');
	background-size: 100%;
	cursor: pointer;
}

.file_icon{
	width: 16px;
	height: 16px;
	background: url('../../assets/report/file_icon.png');
	background-size: 100%;
	margin-right: 10px;
}

.flex{
	display: flex;
}

::v-deep .el-input__inner{
	border-radius: 30px;
}

::v-deep .el-tree-node__content{
	height: 38px;
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
	font-size: 14px;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 500;
	color: #000000;
  background-color: #F7F7F7;
}
</style>
